<template>
  <div>
    <p>eat: {{ obj.hobby.eat }}</p>
    <button @click="obj.hobby.eat = '🍜'">update</button>
  </div>
</template>

<script>
import { isReactive, isRef, reactive, ref, watch } from 'vue';

export default {
  setup() {
    const obj = ref({
      hobby: {
        eat: '西瓜',
      },
    })

    // 和上面类似：ref 如果包裹是一个对象，内部也是借助 reactive 实现的
    /* const obj = reactive({
      value: {
        hobby: {
          eat: '西瓜',
        },
      }
    }) */


    // console.log(isRef(obj)) // true
    // console.log(isReactive(obj.value)) // true
    // console.log(isReactive(obj.value.hobby)) // true
    // 解决方式 3：监听 obj.value，因为 obj.value 是一个 reactive，是 reactive 就符合监听 reactive 数据的特点
    
    // watch(obj.value, () => {
    watch(obj.value.hobby, () => {
      console.log('触发~~')
    })

    return {
      obj
    }
  }
}
</script>

<style lang="scss" scoped></style>